<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>历史曲线</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <form role="form" class="row form-inline">
                            <div class="form-group">
                                <select id="slterminal" name="" id="" class="form-control">
                                    <option>请选择终端</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <select id="slpoint" name="" id="" class="form-control">
                                    <option>请选择采集点</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input id="optime" type="date" name="" id="optime" class="form-control" placeholder="请输入起始时间" />
                            </div>
                            <div class="form-group">
                                <input id="edtime" type="date" name="" id="edtime" class="form-control" placeholder="请输入结束时间" />
                            </div>
                            <button id="querybtn" class="btn btn-white" type="submit">确定</button>
                        </form>
                            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="main" class="row" style="height: 700px;margin-top: 20px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <!-- Bootstrap table -->
    <script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/plugins/bootstrap-table/extensions/export/tableExport.js"></script>
    <script src="js/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
    <script src="js/plugins/echarts/echarts.js"></script>

    <script>
        var dataUrl = "/js/demo/table_base.json";
        var exportFileName = "用户导出表";
    </script>


    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    </script>


    <script>

        // 对Date的扩展，将 Date 转化为指定格式的String
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
        Date.prototype.Format = function (fmt) { //author: meizz 
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        // 日期月份/天的显示，如果是1位数，则在前面加上'0'
        function getFormatDate(arg) {
            if (arg == undefined || arg == '') {
                return '';
            }

            var re = arg + '';
            if (re.length < 2) {
                re = '0' + re;
            }

            return re;
        }
        function addDate(date, days) {
            if (days == undefined || days == '') {
                days = 1;
            }
            var date = new Date(date);
            date.setDate(date.getDate() + days);
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return date.getFullYear() + '-' + getFormatDate(month) + '-' + getFormatDate(day);
        }


        function tryUpdate () {
            var terminalid = 1;
            var pointid = 1;
            var optime = (new Date()).Format("yyyy-MM-dd");
            var edtime = addDate(new Date(), 29);
            var dsturl = "http://localhost:64752/api/count/historycurve?" + 
            "terminalid=" + terminalid + "&" + 
            "pointid=" + pointid + "&" + 
            "optime=" + optime + "&" + 
            "edtime=" + edtime;
            $.get(dsturl, function (list) {       
                var datelist = list.map(function (item) {
                    return item.date;
                });
                var maxlist = list.map(function (item) {
                    return item.max;
                });
                var avglist = list.map(function (item) {
                    return item.avg;
                });
                var minlist = list.map(function (item) {
                    return item.min;
                });
                var stdevlist = list.map(function (item) {
                    return item.stdev;
                });
                var option = {
                    title: {
                        text: '硫化氢浓度曲线图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['日峰值','日均值','日低值','日标准差']
                    },
                    xAxis: {
                        boundaryGap: false,
                        data: datelist
                    },
                    yAxis: {
                        type: 'value',
                        max: '110'
                    },
                    series: [
                        {
                            name: '日峰值',
                            type: 'line',
                            data: maxlist
                        },
                        {
                            name: '日均值',
                            type: 'line',
                            data: avglist
                        },
                        {
                            name: '日低值',
                            type: 'line',
                            data: minlist
                        },
                        {
                            name: '日标准差',
                            type: 'line',
                            data: stdevlist
                        }
                    ]
                };
                myChart.setOption(option);
            });            
        }



        $(function () {

            var option = {
                title: {
                    text: '硫化氢浓度曲线图'
                }
            };
            myChart.setOption(option);



            $("#thisTable").bootstrapTable({
                url: dataUrl,
                showExport: true,
                exportTypes: ['excel', 'csv', 'json'],
                exportOptions: {
                    fileName: exportFileName
                }
            });

            tryUpdate();

            $("#slterminal").change(function (val) {
                var terminalid = $("#slterminal").val();
                $.get("http://localhost:64752/api/point/allid?terminalid=" + terminalid, function (list) {
                    for (var i = 0; i < list.length; ++i) {
                        var $op = $("<option></option>");
                        $op.val(list[i].pointid);
                        $op.text(list[i].pointid + "号采集点");
                        $("#slpoint").append($op);
                    }
                });
            });

            $.get("http://localhost:64752/api/terminal/allid", function (list) {
                for (var i = 0; i < list.length; ++i) {
                    var $op = $("<option></option>");
                    $op.val(list[i].id);
                    $op.text(list[i].id + "号终端");
                    $("#slterminal").append($op);
                }
            });

            $("#querybtn").click(function () {
                var terminalid = $("#slterminal").val();
                var pointid = $("#slpoint").val();
                var optime = $("#optime").val();
                var edtime = $("#edtime").val();
                var dsturl = "http://localhost:64752/api/count/historycurve?" + 
                "terminalid=" + terminalid + "&" + 
                "pointid=" + pointid + "&" + 
                "optime=" + optime + "&" + 
                "edtime=" + edtime;
                $.get(dsturl, function (list) {       
                    var datelist = list.map(function (item) {
                        return item.date;
                    });
                    var maxlist = list.map(function (item) {
                        return item.max;
                    });
                    var avglist = list.map(function (item) {
                        return item.avg;
                    });
                    var minlist = list.map(function (item) {
                        return item.min;
                    });
                    var stdevlist = list.map(function (item) {
                        return item.stdev;
                    });
                    var option = {
                        title: {
                            text: '硫化氢浓度曲线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['日峰值','日均值','日低值','日标准差']
                        },
                        xAxis: {
                            boundaryGap: false,
                            data: datelist
                        },
                        yAxis: {
                            type: 'value',
                            max: '110'
                        },
                        series: [
                            {
                                name: '日峰值',
                                type: 'line',
                                data: maxlist
                            },
                            {
                                name: '日均值',
                                type: 'line',
                                data: avglist
                            },
                            {
                                name: '日低值',
                                type: 'line',
                                data: minlist
                            },
                            {
                                name: '日标准差',
                                type: 'line',
                                data: stdevlist
                            }
                        ]
                    };
                    myChart.setOption(option);
                });
                return false;
            });
        });
    </script>
</body>

</html>
